<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let str = 'hello123hello'



    const matches = [...str.matchAll('hello')]





    const result = matches.reduce((prev, cur) => {
      const [inputValue, matchValue] = cur;

      console.log('== cur ====>', cur)
      console.log('== inputValue ====>', inputValue)
      console.log('== matchValue ====>', matchValue)



      // 拼接没有被匹配上的字符串
      // prev += str.slice(lastIndex, cur.index);
      // // 拼接被匹配上的字符串
      // prev += replacer(inputValue, matchValue);
      // // 更新上一次的位置
      // lastIndex = cur.index + inputValue.length;

      // return prev;
    }, '');



    /**
     * 异步文本替换
     * @param {*} str 字符串
     * @param {*} searchValue 需要替换的字符串
     * @param {*} replacer 异步方法
     * @returns 
     */
    async function asyncReplace(str, searchValue, replacer) {
      // 获取所有的匹配项
      const matches = str.matchAll(searchValue);
      // 存放promise
      const promises = [];
      // 记录上一次的字符串位置
      let lastIndex = 0;

      [...matches].forEach(item => {
        const [inputValue, matchValue] = item;
        // 拼接没有被匹配上的字符串
        promises.push(str.slice(lastIndex, item.index));
        // 把异步任务放到promise中
        promises.push(replacer(inputValue, matchValue));
        // 更新上一次的位置
        lastIndex = item.index + inputValue.length;
      });

      // 如果最后一次的位置不等于字符串长度，说明后面还有文本
      if (lastIndex < str.length) {
        promises.push(str.slice(lastIndex));
      }

      console.log(promises, 'promises');
      // 执行所有的异步任务
      const result = await Promise.all(promises);
      // 拼接字符串返回
      return result.join('');
    }

  </script>
</body>

</html>